<template>
	<view class="index">
		<view class="nav">
			<text class="t2" :class="{ t1: map.status == 'all' }" @tap="setMap('status', 'all')">全部</text>
			<text class="t2" :class="{ t1: map.status == 2}" @tap="setMap('status', 2)">进行中
				<text class="newNub" v-if="Count>0">{{Count}}</text>
			</text>
			<!-- <text class="t2" :class="{ t1: map.status == 3 }" @tap="setMap('status', 3)">待支付</text> -->
			<text class="t2" :class="{ t1: map.status == 99 }" @tap="setMap('status', 99)">已完成</text>
		</view>
		<view class="page">
			<view class="group_1" v-if="order.total > 0" v-for="(v, i) in order.data" :key="i">
				<view class="group_2">
					<view>
						<image src="../../static/定位.png" class="thumbnail_1"></image>
					</view>
					<view class="text-wrapper_1">

						<text lines="1" class="text_1">{{ v.mobile }}</text>
						<!-- <text lines="1" class="text_2"></text>
	        <text lines="1" class="text_3"></text> -->
					</view>
					<!-- <view class="text-wrapper_2 ds"> -->
					<view class="dingdan_status">
						{{ v.status_text }}
						<!-- <text lines="1" class="text_5"></text> -->
					</view>
				</view>

				<view class="group_3">
					<view class="box_1">
						<view class="section_1"></view>
						<view class="section_2"></view>
					</view>
					<view class="box_2">
						<view class="text-wrapper_3">
							<text lines="1" class="text_6">{{ v.createtime | formatDate }}</text>
						</view>
						<view class="text-wrapper_4">
							<text lines="1" class="text_11">{{ v.start }}</text>
						</view>
					</view>
					<view style="position: absolute;right: 0;padding-right: 65rpx;">
						￥<span style="color: black;font-size: 1.5rem;font-weight: 700;">{{v.price}}</span>
					</view>
				</view>
				<view class="group_4">
					<view class="box_3"></view>
					<text lines="1" class="text_17">{{ v.end }}</text>
				</view>
				<view class="group_5">
					<view class="group_6">
					</view>
					<view class="group_7">
						<view class="text-wrapper_6" @tap="navigateTo(i)">
							<text lines="1" class="text_20">查看订单</text>
							<!--         <text lines="1" class="text_21">看</text>
	          <text lines="1" class="text_22">订单</text> -->
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="center">
      <view class="orders" v-if="order.total > 0" v-for="(v, i) in order.data" :key="i" >
        <view class="top">
			<view class="input">
			  <text class="icon gray">&#xe77c;</text>
			  <text class="time">王师傅</text>
			</view>
         
          <text class="more icon gray">{{ v.status_text }}&#xe60f;</text>
        </view>
        <view class="left">
			<view class="input">
			  <text class="icon gray">&#xe77c;</text>
			  <text class="time">{{ v.createtime | date }}</text>
			</view>
          <view class="input">
            <text class="icon green">&#xe608;</text>
            <text class="address">{{ v.start }}</text>
          </view>
          <view class="input">
            <text class="icon orange">&#xe608;</text>
            <text class="address">{{ v.end }}
			 
			</text> -->

			<!-- <button>删除订单</button> <button>查看订单</button> -->
			<!-- </view>
        </view> -->
			<!-- <view class="right" style="font-size: 14pt; color: black;">￥{{ v.price }}
		
		
		</view> -->
			<!-- <view class="right">
			<button class="btn">删除订单</button>
			<button>查看订单</button>
		</view> -->
			<!-- <view class="" style="text-align: right;
    width: 320px;" >
			<button class="del" style="display: inline-block;font-size: 12px; margin-right: 1rem;border-radius: 28px;">删除订单</button> <button class="look" style="display: inline-block;font-size: 12px;" @tap="navigateTo('/pages/order-deatil/taxiService?action=order&order_id=' + v.id)">查看订单</button>
		</view> -->
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import helper from '../../common/helper.js';
	import api from '../../common/api.js';
	export default {
		data() {
			return {
				imagesURL: "",
				map: {
					status: 'all',
					type: "",
					page: 1
				},
				order: {},
				Count: '',
				info:{
					last_page:"",
				}
			};
		},
		filters: {
			// formatDate: function(value) {
			// 	var date = new Date();
			// 	//date.setTime(value);
			// 	var month = date.getMonth() + 1;
			// 	var hours = date.getHours();
			// 	if (hours < 10)
			// 		hours = "0" + hours;
			// 	var minutes = date.getMinutes();
			// 	if (minutes < 10)
			// 		minutes = "0" + minutes;
			// 	var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
			// 		" " + hours + ":" + minutes;
			// 	return time;
			// }
			formatDate: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},

		},
		onLoad(val) {
			// console.log('aaa',val)
			if (val.status == 2) {
				this.setMap("status", val.status)
			}
		},
		onShow() {
			this.getList();
			this.imagesURL = app.globalData.host_image
			this.getNumber()
		},
		mounted() {

		},
		methods: {
			async getNumber() {
				let res = await api.getOrderList({
					status: 2
				});
				uni.stopPullDownRefresh();
				console.log("999",res.data.total)
				this.Count = res.data.total
			},
			async getList() {
				let res = await api.getOrderList(this.map);
				
				this.order = res.data;
				uni.stopPullDownRefresh();
			},
			onPullDownRefresh() {
				this.map.page = 1;
				this.getList();
			},
			onReachBottom() {
				// if (this.info.last_page > this.info.current_page) {
				// 	this.getList();
				// }
				this.getList();
			},
			navigateTo(val) {
				// console.log(this.order.data[val].status);return false;
				if (this.order.data[val].status == 99) {
					uni.navigateTo({
						url: "./goods?order_id=" + this.order.data[val].id
					});
				} else {
					uni.navigateTo({
						url: '/pages/index/index?action=order&order_id=' + this.order.data[val].id
					});
				}

			},
			setMap(key, value) {

				this.map[key] = value;
				this.map.status = value
				this.map.page = 1;
				this.status = value
				// console.log(this.map[key] = value)
				this.getList();

			}
		}
	};
</script>

<style lang="scss" scoped>
	page,
	.index {
		height: 100%;
		background-color: #fbfbfb;
	}

	.del {

		border: 1px solid #707070;
		color: #191919;
	}

	.look {
		border-radius: 28px !important;
		border: 1px solid #3294FF;
		color: #3294FF;
	}

	.center {
		padding: 30upx;
	}

	.center1 {
		padding: 30upx;
	}

	.ds {
		position: relative;
		right: -30rpx;
	}

	.nav {
		display: flex;
		padding: 20upx;
		font-size: 28upx;
		background-color: #ffffff;

		.t1 {
			width: 48%;
			text-align: center;
			color: #3294FF;
		}

		.t2 {
			width: 48%;
			text-align: center;
		}

		.newNub {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			line-height: 30rpx;
			background-color: red;
			color: #fff;
			position: absolute;
		}

		.icon {
			font-size: 30upx;
		}
	}

	.orders {
		margin-bottom: 30upx;
		display: flex;
		padding: 20upx 20upx;
		border-radius: 10upx;
		box-shadow: 1px 1px 1px 1px #eaeaea;
		align-items: center;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;

		.icon {
			font-size: 48upx;
		}

		.top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24upx;
			border-bottom: 1.5px solid #EFEFEF;

			.input {
				display: flex;
				align-items: center;
				color: #999999;

				.time {
					width: 70%;
					font-size: 25upx;
					color: #979797;
				}


			}

			.more {
				font-size: 28upx;
			}
		}

		.left {
			width: 80%;

			.input {
				width: 100%;
				padding: 6upx 0;
				display: flex;
				align-items: center;
				overflow: hidden;
				/* 第二步：让文本不会换行， 在同一行继续 */
				white-space: nowrap;
				text-overflow: ellipsis;

				.time {
					width: 70%;
					font-size: 25upx;
					color: #979797;
				}

				.address {
					width: 70%;
					font-size: 26upx;
				}
			}
		}

		.right {
			width: 20%;
			font-size: 16px;
			color: #e51c23;

			button {
				width: 60%;
				background-color: #32c45e;
				margin-top: 20upx;
				border-radius: 50upx;
				padding: 0 10upx;
				font-size: 22upx;
			}
		}
	}

	.bottom {
		background-color: #ffffff;
		position: absolute;
		width: 100%;
		bottom: 0;
		height: 120upx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.item {
			display: flex;
			flex-direction: column;
			width: 33.33%;
			align-items: center;
			font-size: 24upx;

			.icon {
				font-size: 56upx;
				color: #999999;
			}
		}
	}

	.active {
		color: #32c45e !important;

		.icon {
			color: #32c45e !important;
		}
	}

	.page {
		background-color: rgba(238, 238, 238, 1.000000);
		position: relative;
		width: 750rpx;
		height: 1624rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.group_1 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 28rpx;
		height: 304rpx;
		width: 710rpx;
		display: flex;
		flex-direction: column;
		margin: 25rpx 0 0 20rpx;
	}

	.group_2 {
		// width: 654rpx;
		width: 90%;
		margin-left: 5%;
		height: 32rpx;
		flex-direction: row;
		display: flex;
		white-space: nowrap;
		// justify-content: space-between;
		margin: 22rpx 0 42rpx 24rpx;
	}

	.text-wrapper_1 {
		width: 84rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: 阿里巴巴普惠体 2.0 35 Thin;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
		margin-top: 6rpx;
		margin-right: 420rpx;
	}

	.text_1 {
		width: 84rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_2 {
		width: 84rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_3 {
		width: 84rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(61, 61, 61, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text-wrapper_2 {
		width: 84rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_4 {
		width: 84rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(154, 154, 154, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;

	}

	.text_5 {
		width: 84rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(154, 154, 154, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.dingdan_status {
		width: 175rpx;
		height: 28rpx;
		color: rgba(154, 154, 154, 1);
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: right;
	}

	.image-wrapper_1 {
		width: 34rpx;
		height: 34rpx;
		display: flex;
		flex-direction: row;
		margin: 2rpx 0 0 24rpx;
	}

	.thumbnail_1 {
		width: 34rpx;
		height: 34rpx;
	}

	.group_3 {
		width: 646rpx;
		height: 72rpx;
		flex-direction: row;
		display: flex;
		margin: 4rpx 0 0 28rpx;
	}

	.box_1 {
		width: 16rpx;
		height: 64rpx;
		margin-top: 4rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.section_1 {
		background-color: rgba(149, 156, 172, 1.000000);
		border-radius: 100%;
		width: 16rpx;
		height: 16rpx;
		display: flex;
		flex-direction: column;
	}

	.section_2 {
		background-color: rgba(50, 148, 255, 1.000000);
		border-radius: 100%;
		width: 16rpx;
		height: 16rpx;
		margin-top: 32rpx;
		display: flex;
		flex-direction: column;
	}

	.box_2 {
		width: 180rpx;
		height: 72rpx;
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text-wrapper_3 {
		width: 180rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_6 {
		width: 180rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_7 {
		width: 180rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_8 {
		width: 180rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_9 {
		width: 180rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_10 {
		width: 180rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text-wrapper_4 {
		width: 144rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 24rpx;
	}

	.text_11 {
		width: 144rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_12 {
		width: 144rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_13 {
		width: 144rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_14 {
		width: 144rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_15 {
		width: 28rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: #191919;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Heavy;
		font-weight: 900;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 36rpx 0 0 269rpx;
		text-align: center;

	}

	.text_16 {
		width: 62rpx;
		height: 52rpx;
		overflow-wrap: break-word;
		color: rgba(26, 26, 26, 1.000000);
		font-size: 52rpx;
		font-family: Source Han Sans CN-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		line-height: 52rpx;
		margin: 16rpx 0 0 2rpx;
	}

	.group_4 {
		width: 104rpx;
		height: 24rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 24rpx 0 0 28rpx;
	}

	.box_3 {
		background-color: rgba(61, 61, 61, 1.000000);
		border-radius: 100%;
		width: 16rpx;
		height: 16rpx;
		margin-top: 4rpx;
		display: flex;
		flex-direction: column;
	}

	.text_17 {
		width: 72rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1.000000);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.group_5 {
		width: 304rpx;
		height: 56rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin: 6rpx 0 28rpx 370rpx;
	}

	.group_6 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 28rpx;
		height: 56rpx;
		// border: 1px solid rgba(112,112,112,1);
		display: flex;
		flex-direction: column;
		width: 140rpx;
	}

	.text-wrapper_5 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 16rpx 0 0 22rpx;
	}

	.text_18 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.text_19 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(25, 25, 25, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	.group_7 {
		background-color: rgba(255, 255, 255, 1.000000);
		border-radius: 28rpx;
		height: 56rpx;
		border: 1px solid rgba(50, 148, 255, 1);
		display: flex;
		flex-direction: column;
		width: 140rpx;
	}

	.text-wrapper_6 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		font-size: 0rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 14rpx 0 0 22rpx;
	}

	.text_20 {
		width: 96rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(50, 148, 255, 1);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 24rpx;
	}

	// .text_21 {
	//   width: 96rpx;
	//   height: 24rpx;
	//   overflow-wrap: break-word;
	//   color: rgba(50, 148, 255, 1);
	//   font-size: 24rpx;
	//   font-family: Source Han Sans CN-Regular;
	//   font-weight: normal;
	//   text-align: center;
	//   white-space: nowrap;
	//   line-height: 24rpx;
	// }
	// .text_22 {
	//   width: 96rpx;
	//   height: 24rpx;
	//   overflow-wrap: break-word;
	//   color: rgba(50, 148, 255, 1);
	//   font-size: 24rpx;
	//   font-family: Source Han Sans CN-Regular;
	//   font-weight: normal;
	//   text-align: center;
	//   white-space: nowrap;
	//   line-height: 24rpx;
	// }
	/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	@font-face {
		font-family: "阿里巴巴普惠体 2.0 35 Thin";
		font-weight: 250;
		src: url("//at.alicdn.com/wf/webfont/gtZpz7xBBdre/KFQdJd-VpOJ7NrWeqPXRu.woff2") format("woff2"),
			url("//at.alicdn.com/wf/webfont/gtZpz7xBBdre/jken5V6vAgokjBxdxmWQF.woff") format("woff");
		font-display: swap;
	}
</style>